<template>
  <div class="all">
    <div class="main">
      <div class="toplist">
        <dl class="toplist-nav">
          <dt class="toplist-title">排行榜</dt>

          <dd
            class="toplist-item"
            :class="currentId === id ? 'active' : ''"
            v-for="{ name, id } in toplist"
            :key="id"
            @click="currentIdChange(id)"
          >
            <a href="#">{{ name }}</a>
          </dd>
        </dl>
      </div>
      <div class="topmod">
        <div class="toplist-music">
          <h1>{{listName}}</h1>
          <span>{{date}}</span>
          <a href>榜单规则</a>
        </div>
        <div class="toolbar">
          <el-button type="success" class="el-icon-headset" @click="getAllSong()">播放全部</el-button>
          <el-button class="el-icon-circle-plus-outline">添加到</el-button>
          <el-button class="el-icon-download">下载</el-button>
          <el-button class="el-icon-folder-checked">批量操作</el-button>
          <el-button class="el-icon-s-comment">评论(257541)</el-button>
        </div>
        <div class="songlist" @click="toSong">
          <el-table
            :data="tableData"
            style="width: 100%"
            class="el-table11"
            v-if="tableData.length"
          >
            <el-table-column type="index" width="100px" align="center"></el-table-column>
            <el-table-column label="歌曲" width="407px">
              <template slot-scope="{ row }" class="musicitem">
                <img v-lazy="row.al.picUrl" alt class="el-img" />
                <span class="el-i">{{ row.al.name }}</span>
                <div class="iconlist">
                  <a class="el-icon-video-play" :data-songid="row.id"></a>
                  <a class="el-icon-circle-plus-outline"></a>
                  <a class="el-icon-s-promotion"></a>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="name" label="歌手" width="145px">
              <template slot-scope="{ row }">
                <span>{{ row.ar[0].name }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="date" label="时长" width="width">
              <template slot-scope="{ row }">
                <span>{{ row.dt | dateFrm }}</span>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getRankingList } from "../../api/ranking";
import { getMusitList } from "../../api/musiclist";
import moment from "moment";
export default {
  name: "Ranking",
  components: {},
  data() {
    return {
      tableData: [],
      toplist: {},
      currentId: 3779629,
      date: "",
      listName: "",
    };
  },
  async mounted() {
    //获取排行榜列表
    getRankingList().then((res) => {
      this.toplist = res.list;
    });
    this.getmusic(3779629);
  },
  methods: {
    //点击事件，改变要展示的列表
    currentIdChange(id) {
      this.currentId = id;
      this.tableData = [];
      this.getmusic(id);
    },
    //点击单曲播放时跳转到歌曲播放页面将歌曲id传过去

    //请求获取对应排行榜的歌曲列表
    getmusic(id) {
      getMusitList(id).then((res) => {
        this.tableData = res.playlist.tracks;
        this.listName = res.playlist.name;
        this.tableData = this.tableData.slice(0, 15);
        this.getdate();
        // console.log( this.musiclistId)
      });
    },
    getdate() {
      this.date = moment().format("YYYY-MM-DD");
    },
    //将歌曲id传到播放页
    toSong(e) {
      if (e.target.dataset.songid) {
        console.log(e.target.dataset.songid);
        this.$router.push({
          name: "MusicPlayer",
          query: { songId: e.target.dataset.songid },
        });
      }
    },
    // getAllSong(){
    //   this.$router.push({name:'Songs',params:{songItem:this.musiclistId}});
    // }
  },

  filters: {
    dateFrm: function (el) {
      return moment(el).format("mm:ss");
    },
  },
};
</script>

<style>
.all {
  background-color: #fafafa;
}
.main {
  width: 1200px;
  margin: 0 auto;
  overflow: hidden;
}
.active {
  color: white !important;
  background-color: #31c27c;
}
.toplist-nav {
  text-align: left;
  margin-bottom: 20px;
  width: 200px;
}
.toplist-item {
  height: 22px;
  padding: 8px 17px;
  overflow: hidden; /*溢出部分隐藏*/
  white-space: nowrap; /*文本不换行*/
  text-overflow: ellipsis;
}
.toplist-item a:hover {
  color: #31c27c;
}
a {
  text-decoration: none;
  color: black;
  font-size: 15px;
}
.toplist {
  float: left;
  border: 1px solid #e7e7e7;
  margin-top: 60px;
}
.toplist-title {
  font-size: 20px;
  width: 144px;
  height: 60px;
  margin: 0 17px 10px;
  line-height: 60px;
  text-align: left;
  font-weight: 500;
  border-bottom: 1px solid #e7e7e7;
}
.topmod {
  margin-top: 60px;
  margin-left: 210px;
}
.toplist-music {
  display: flex;
  align-items: center;
  padding-left: 30px;
  margin-bottom: 10px;
}
.toplist-music h1 {
  font-weight: 400;
  font-size: 25px;
  margin-right: 15px;
  line-height: 64px;
}
.toplist-music span {
  font-size: 14px;
  margin-right: 10px;
}
.toplist-music a {
  line-height: 64px;
}
.toolbar {
  display: flex;
  font-size: 18px;
  margin-bottom: 20px;
}
.el-button:not(:first-child) {
  font-size: 16px !important;
  border-color: #c9c9c9;
  background-color: #fafafa !important;
}
.el-icon-s-comment {
  width: 180px !important;
}
.songlist-header {
  display: flex;
  width: 550px;
  height: 50px;
  padding: 0 95px 0 122px;
  color: #999;
  font-size: 14px;
}
.songlist-header li:hover {
  color: #999;
}
.songlist-name {
  width: 408px;
  text-align: left;
}
.songlist-author {
  width: 130px;
  text-align: left;
  padding-left: 15px;
}
.songlist-time {
  width: 50px;
}
.el-table__row {
  height: 80px !important;
}
.el-table_1_column_1 .cell {
  text-align: center;
}

.el-table_1_column_2,
.el-img {
  /* margin-bottom: -22px; */
  width: 60px;
  height: 60px;
}
.el-i {
  height: 60px;
  line-height: 60px;
}
.colgroup,
.el-table__row {
  background-color: #fcfcfc !important;
}
.iconlist {
  float: right;
  /* font-size: 18px !important; */
  margin-top: 20px;
  display: none;
}
.iconlist a {
  font-size: 30px;
}
.iconlist a:hover {
  color: #31c27c;
}
.el-table__row:hover .iconlist {
  display: block;
}
.el-i {
  display: inline-block;
  width: 180px;
  overflow: hidden; /*溢出部分隐藏*/
  white-space: nowrap; /*文本不换行*/
  text-overflow: ellipsis;
}
.musicitem {
  display: flex !important;
}
</style>
